const { reactive, toRefs, onMounted } = Vue;
const IModal = {
  name: "i-modal",
  props: {
    state: Object,
  },
  setup(props) {
    const { title, message, duration, show, to } = props.state;
    console.log(props);
    const state = reactive({
      show: show || false,
      title: title || "",
      message: message || "",
      duration: duration || 1000,
    });
    const determine = () => {
      state.show = false;
      location.href = to;
    };
    const cancle = () => {
      state.show = true;
    };
    onMounted(() => {
      setTimeout(() => {
        state.show = true;
      }, state.duration);
    });
    return {
      determine,
      cancle,
      ...toRefs(state),
    };
  },
  template: `
  <div class="notice right" v-if="this.show">
      <h3>
        <!-- <slot #title></slot> -->
        {{title}}
      </h3>
      <p>{{message}}</p>
      <div class="ui buttons">
        <button class="button" @click="determine">确定</button>
        <button class="button" @click="cancle">取消</button>
      </div>
    </div>
  `,
};
export default IModal;
